<template>
  <div class="my-tool">
    <!-- 测量工具 -->
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <svg-icon icon-class="toolBox" class="rp-img" />
        <span>工具</span>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="line">测距</el-dropdown-item>
          <el-dropdown-item command="area">测面</el-dropdown-item>
          <el-dropdown-item command="marker">坐标查询</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 地图源切换 -->
    <el-dropdown v-show="show" @command="handleMapChange">
      <span class="el-dropdown-link">
        <svg-icon icon-class="layerControl" class="rp-img" />
        <span>{{ currentMap }}</span>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :command="v.value" v-for="v in mapList" :key='v.value'>{{ v.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 围栏控制 -->
    <el-dropdown v-show="show && fanceShow" class="center-type" :hide-on-click="false" @command="handleFence">
      <span class="el-dropdown-link">
        <svg-icon icon-class="fence" class="rp-img" />
        <span>围栏图层</span>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu slot="dropdown" style="margin-right:5px">
          <el-dropdown-item command="showFence">{{ !layerCheck.fence ? '显示' : '隐藏' }}围栏</el-dropdown-item>
          <el-dropdown-item command="showRoad">{{ !layerCheck.road ? '显示' : '隐藏' }}线路</el-dropdown-item>
          <el-dropdown-item command="addFence" v-if="fenceFormHandle">新增围栏</el-dropdown-item>
          <el-dropdown-item command="addRoad" v-if="fenceFormHandle">新增线路</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 区域查询 -->
    <el-dropdown v-show="show" @command="handleQuery" v-if='areaQuery'>
      <span class="el-dropdown-link">
        <svg-icon icon-class="carSearch" class="rp-img" />
        <span>区域查询</span>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :command="v.value" v-for="v in queryList" :key='v.value'>{{ v.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 区域查询-时间浮窗 -->
    <div class="area-query-dom" v-if="showQueryTime">
      <div class="area-query-title">
        <span>区域查询</span>
        <el-icon @click="cancel" style="cursor: pointer;">
          <Close />
        </el-icon>
      </div>
      <el-form ref="queryRef" :model="query" :rules="rules" label-width="80px">
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="query.startTime" type="datetime" placeholder="请输入开始时间"
            value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="query.endTime" type="datetime" placeholder="请输入结束时间"
            value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
    <!-- 区域查询-结果弹窗 -->
    <el-dialog title="区域查询结果" v-model="open" width="1200px" append-to-body>
      <div class="search">
        <div class="search-title">
          <span class="search-text">设备状态</span>
          <el-select v-model="queryParams.vehicleStatus" placeholder="请选择" filterable clearable class="search-input">
            <el-option v-for="item in sel_option.vehStaOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-title">
          <span class="search-text">监管类型</span>
          <el-select v-model="queryParams.objTypeName" placeholder="请选择" filterable clearable class="search-input">
            <el-option v-for="item in sel_option.objType" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </div>
        <div class="search-title" style="margin-right: 10px;">
          <span class="search-text">所属公司</span>
          <el-tree-select v-model="queryParams.companyId" placeholder="请选择所属公司" clearable :data="treeList"
            :expand-on-click-node="false" :render-after-expand="false" check-strictly :props="{ label: 'label' }"
            node-key="id" filterable @change="getData" />
        </div>
        <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="Download" @click="handleExport">导出</el-button>
      </div>
      <virtualTable style="width:100%;height:500px;" :columns="columns" :data="filterTableData">
        <template #rowItem="{ column, rowData, rowIndex }">
          <span v-if="column.key === 'index'">{{ rowIndex + 1 }}</span>
          <span v-else-if="column.key === 'operation'">
            <div @click="popTrackClick({ ...rowData, queryTime: [query.startTime, query.endTime] })" class="other-btn">
              轨迹详情
            </div>
          </span>
          <span v-else class="overflow-text" :title="rowData[column.key]">{{ rowData[column.key] }}</span>
        </template>
      </virtualTable>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import dayjs from "dayjs"
let markerIndex = 1000, drawObj: any = null, editType = null, _map, graphLayer;
import virtualTable from '../../components/virtualTable/index.vue'
import { ElLoading } from 'element-plus'
import { getEquipByPolygon } from "./mapTool";
import { listElectricFence } from "../../api/comlbs/electricFence";
import { getSearchCompanyListRole } from "../../api/system/dept";
import { ref, PropType, toRaw } from "vue";
declare const L: any;
declare const GlobalSetting: any;
export default {
  props: {
    map: {
      type: null || Object as PropType<any>,
    },
    show: {
      type: Boolean
    },
    fanceShow: {
      type: Boolean,
      default: true
    },
    getDataByEquipId: {
      type: Function,
    },
    popTrackClick: {
      type: Function,
    },
    fenceFormHandle: {
      type: Function,
      default: null
    },
    areaQuery: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const rules = ref({
      startTime: [
        { required: true, message: "开始时间不能为空", trigger: "blur" }
      ],
      endTime: [
        { required: true, message: "结束时间不能为空", trigger: "blur" }
      ],
    });
    const mapList = ref([
      { value: "vetor", label: "矢量图" },
      { value: "image", label: "影像图" },
    ]);
    const queryList = ref([
      { value: "circle", label: "圆形" },
      { value: "rectangle", label: "矩形" },
      { value: "polygon", label: "多边形" },
    ]);
    const currentMap = ref("矢量图")
    const mapLayer: any = ref({})
    const measuregroup = ref({})
    const showQueryTime = ref(false)
    const timer = ref(null) //节流方法
    const query = ref({
      startTime: dayjs(new Date()).format("YYYY-MM-DD 00:00:00"),
      endTime: dayjs(new Date()).format("YYYY-MM-DD 23:59:59")
    });
    const tableData = ref([]);
    const filterTableData = ref([]);
    const open = ref(false);
    const columns = ref([
      { key: "index", title: "序号", width: 55 },
      { key: "vehicleStatus", title: "设备状态", width: 80 },
      { key: "numberPlate", title: "光伏板编号", width: null },
      { key: "objTypeName", title: "监管类型", width: 80 },
      { key: "driverName", title: "负责人", width: 80 },
      { key: "companyName", title: "所属公司", width: null },
      { key: "startTime", title: "进入时间", width: null },
      { key: "endTime", title: "离开时间", width: null },
      { key: "duration", title: "停留时长", width: null },
      // { key: "gpsDateTime", title: "最后定位时间", width: null },
      { key: "operation", title: "操作", width: 100 },
    ]);
    const queryParams: any = ref({})
    const treeList = ref([])
    const sel_option: any = ref({
      vehStaOptions: []
    })
    const layerCheck = ref({
      fence: false,
      road: false,
    })
    const toolMap = ref(null)
    return {
      layerCheck, mapList, currentMap, mapLayer, measuregroup, timer, queryList, query, showQueryTime, rules, tableData, open, columns, queryParams, treeList, sel_option, filterTableData, toolMap
    };
  },
  components: { virtualTable },
  mounted() {
    // 所属公司下拉框数据
    getSearchCompanyListRole().then(res => {
      this.treeList = res.data
    });
    // 监管对象下拉框数据
    this.setDataByDictType(this.sel_option, 'objType')
    // 设备状态
    for (let key in GlobalSetting.textTransfer) {
      this.sel_option.vehStaOptions.push({ value: GlobalSetting.textTransfer[key], label: GlobalSetting.textTransfer[key] })
    }
  },
  methods: {
    myRequire(str) {
      return new URL(`../../../assets/img/${str}`, import.meta.url).href
    },
    handleSearch() {
      let _arr = [...this.tableData]
      for (let key in this.queryParams) {
        if (key != 'companyId') {
          this.queryParams[key] = this.queryParams[key] ?? ''
          this.filterTableData = _arr.filter(v => (v[key] && v[key].indexOf(this.queryParams[key]) > -1) || !this.queryParams[key])
          _arr = [...this.filterTableData]
        }
      }
    },
    handleExport() {
      this.downloadByJSON('/comlbs/realtimePositioning/regionDeviceExport', this.filterTableData, `区域查车数据.xlsx`);
    },
    submitForm() {
      this.$refs["queryRef"].validate(valid => {
        if (valid) {
          this.getData()
        }
      });
    },
    // 获取区域查车数据
    getData() {
      const { circlePoint, points, radius, type, startTime, endTime } = this.query;
      let data = { circlePoint, points, radius, type, startTime, endTime, deptId: this.queryParams.companyId }
      let searchInstance = ElLoading.service({ text: "查询数据中，请稍候", background: "rgba(0, 0, 0, 0.7)", })
      getEquipByPolygon(data).then(res => {
        this.cancel();
        searchInstance.close();
        if (res.code !== 200) return
        this.tableData = [];
        res.data.forEach(v => {
          let obj = { ...v, ...this.getDataByEquipId(v.dvo) };
          if (obj) this.tableData.push(obj)
        })
        this.filterTableData = [...this.tableData]
        this.open = true;
        this.handleSearch()
      }).catch(() => {
        this.cancel();
        searchInstance.close();
      })
    },
    cancel() {
      this.showQueryTime = false;
      if (graphLayer) {
        graphLayer.removeFrom(_map)
        graphLayer = null;
      }
    },
    handleFence(command) {
      switch (command) {
        case 'showFence':
          this.initLayer(2)
          break;
        case 'showRoad':
          this.initLayer(3)
          break;
        case 'addFence':
          this.fenceFormHandle({ type: 2 });
          break;
        case 'addRoad':
          this.fenceFormHandle({ type: 3 });
          break;
        default:
          break;
      }
    },
    // 区域查询
    handleQuery(command: string) {
      this.initDrawCtrl();
      editType = command;
      this.startDraw();
    },
    // 电子围栏、线路信息(2是围栏，3是线)
    initLayer(type: number, refresh = false) {
      let _this = this, param = type == 2 ? 'fence' : 'road';
      if (refresh) {
        _this.mapLayer[`${param}Layer`] && _this.mapLayer[`${param}Layer`].remove();
      } else {
        this.layerCheck[param] = !this.layerCheck[param];
        if (!this.layerCheck[param]) {
          _this.mapLayer[`${param}Layer`] && _this.mapLayer[`${param}Layer`].remove();
          return;
        }
      }
      listElectricFence({ type }).then((response) => {
        let polygonData = response.data;
        let polygonGeoJson: any = {
          type: 'FeatureCollection',
          features: []
        }
        polygonData.forEach((v: any) => {
          let obj_polygon: any = {
            type: 'Feature',
            geometry: {
              type: type == 3 ? 'LineString' : 'Polygon',
              coordinates: type == 3 ? [] : [[]],
            },
            properties: {}
          }
          obj_polygon.properties = Object.assign({}, v);
          if (type == 3) {
            obj_polygon.geometry.coordinates = v.xyWgs84.map(v => [v.lng, v.lat]);
          } else {
            obj_polygon.geometry.coordinates[0] = v.xyWgs84.map(v => [v.lng, v.lat]);
          }
          polygonGeoJson.features.push(obj_polygon);
        })
        // 电子围栏图层信息
        _this.mapLayer[`${param}Layer`] = L.geoJSON(polygonGeoJson, {
          onEachFeature: (feature, layer) => {
            layer.bindTooltip(feature.properties.name);
          },
          style: () => {
            return {
              color: '#0066FF',
              weight: 3,
              opacity: 0.8
            }
          },
        }).addTo(this.toolMap).on('click', (e) => {
          if (this.fenceFormHandle) {
            this.fenceFormHandle(e.layer.feature.properties, false);
          }
        });
      })
    },
    handleMapChange(command: string) {
      this.mapList.forEach(v => {
        if (v.value === command) this.currentMap = v.label
      })
      let t_setting = GlobalSetting.MapConfig.tianditu, baseLayer, baseNote;
      switch (command) {
        case 'vetor':
          baseLayer = L.tileLayer(t_setting.vectorUrl, {
            //@ts-ignore
            subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
            maxZoom: t_setting.maxZoom,
            maxNativeZoom: t_setting.maxNativeZoom,
          });
          baseNote = L.tileLayer(t_setting.vNoteUrl, {
            //@ts-ignore
            subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
            maxZoom: t_setting.maxZoom,
            maxNativeZoom: t_setting.maxNativeZoom,
          });
          break;
        case 'image':
          baseLayer = L.tileLayer(t_setting.imageUrl, {
            //@ts-ignore
            subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
            maxZoom: t_setting.maxZoom,
            maxNativeZoom: t_setting.maxNativeZoom,
          });
          baseNote = L.tileLayer(t_setting.iNoteUrl, {
            //@ts-ignore
            subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
            maxZoom: t_setting.maxZoom,
            maxNativeZoom: t_setting.maxNativeZoom,
          });
          break;
        default:
          break;
      }
      this.toolMap.baseLayerGroup.getLayers().forEach(v => {
        v.removeFrom(this.toolMap.baseLayerGroup);
      })
      this.toolMap.baseLayerGroup.addLayer(baseLayer);
      this.toolMap.baseLayerGroup.addLayer(baseNote);
    },
    //测量工具方法
    handleCommand(command: string) {
      switch (command) {
        case 'line':
          this.startDrawLine();
          break;
        case 'area':
          this.startDrawPolygon();
          break;
        case 'marker':
          this.startDrawMarker();
          break;
        default:
          break;
      }
    },
    thro(func: Function, wait: number) {
      let timerOut: any = this.timer
      return function (e: any) {
        if (!timerOut) {
          func(e);
          timerOut = setTimeout(function () {
            timerOut = null;
          }, wait)
        }
      }
    },
    // 自定义 展示框  :notShow,不展示关闭按钮
    setTipText(content: string, removeMeasureLayer: Function, notShow = true) {
      const el = document.createElement("div");
      el.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
      el.style.width = "fit-content";
      el.style.height = "28px";
      el.style.position = "absolute";
      el.style.left = "20px";
      el.style.top = "-7px";
      el.style.padding = "0 5px";
      el.style.display = "flex";
      el.style.alignItems = "center";
      el.style.justifyContent = "center";

      const triangle = document.createElement("div");
      triangle.style.position = "absolute";
      triangle.style.left = "-10px";
      triangle.style.top = "6px";
      triangle.style.width = "0";
      triangle.style.height = "0";
      triangle.style.borderTop = "7px solid transparent";
      triangle.style.borderRight = "10px solid rgba(0, 0, 0, 0.5)";
      triangle.style.borderBottom = "7px solid transparent";

      const text = document.createElement("span");
      text.innerHTML = content;
      text.style.fontSize = "14px";
      text.style.whiteSpace = "nowrap";

      const close = document.createElement("span");
      close.innerHTML = "×";
      close.style.width = "10px";
      close.style.fontSize = "18px";
      close.style.marginLeft = "5px";
      close.style.cursor = "pointer";
      close.style.display = notShow ? "none" : '';

      close.addEventListener("click", () => {
        removeMeasureLayer();
      });

      L.DomEvent.disableClickPropagation(el)

      el.appendChild(triangle);
      el.appendChild(text);
      el.appendChild(close);

      return el;
    },
    startDrawMarker() {
      const map = this.toolMap;
      let _this: any = this;
      let _marker: any;
      function removeMeasureLayer() {
        _marker.removeFrom(_this.measuregroup);
      }
      //监听鼠标点击事件，弹出经纬度
      const mousemoveHandler = (e: any) => {
        if (!_marker) {
          _marker = L.marker(e.latlng, {
            icon: L.divIcon({
              html: _this.setTipText('lng:' + e.latlng.lng.toFixed(6) + ',lat:' + e.latlng.lat.toFixed(6), removeMeasureLayer, false)
            }),
            zIndexOffset: markerIndex,
          }).addTo(_this.measuregroup)
        } else {
          _marker.setIcon(L.divIcon({
            html: _this.setTipText('lng:' + e.latlng.lng.toFixed(6) + ',lat:' + e.latlng.lat.toFixed(6), removeMeasureLayer, false)
          }));
          _marker.setLatLng(e.latlng)
        }
      };
      // 点击结束， 移除事件是良好的编程习惯
      const onMapClick = () => {
        map.off("click", onMapClick);
        map.off("mousemove", mousemoveHandler);
      };
      map.on('click', onMapClick);
      map.on("mousemove", mousemoveHandler);
    },
    startDrawLine() {
      let _this: any = this, map = this.toolMap;
      // interactive = false 避免用户双击map无效
      let _lineLayer = L.polyline([], {
        interactive: false,
        color: '#0066FF'
      }).addTo(_this.measuregroup);
      // 存储线的marker，方便一起移除
      let _markerList: any = [];
      // 绘制mousemove line
      const tempLayer = L.polyline([], {
        interactive: false,
        color: '#0066FF'
      }).addTo(_this.measuregroup);
      let tempPoints: any = [];
      // 结束绘制
      const removeMeasureLayer = () => {
        _lineLayer.removeFrom(_this.measuregroup);
        _markerList.forEach((v: { removeFrom: Function }) => {
          v.removeFrom(_this.measuregroup);
        })
      };
      _markerList = [];

      const clickHandler = (e: any) => {
        _lineLayer.addLatLng(e.latlng);
        tempPoints[0] = e.latlng;
        map.doubleClickZoom.disable()

        let latlng: any = _lineLayer.getLatLngs();
        const len = this.formatLength(latlng);

        let _marker = L.marker(e.latlng, {
          icon: L.divIcon({ html: _this.setTipText(len, removeMeasureLayer) }),
          zIndexOffset: markerIndex + _markerList.length,
        }).addTo(_this.measuregroup)
        _markerList.push(_marker)
      };

      const throClickHandler = _this.thro(clickHandler, 300)

      const mousemoveHandler = (e: any) => {
        if (tempPoints.length) {
          tempPoints[1] = e.latlng;
          tempLayer.setLatLngs(tempPoints);
        }
      };
      // 双击结束， 移除事件是良好的编程习惯
      const dblclickHandler = () => {
        tempPoints = null;
        tempLayer.remove();
        map.doubleClickZoom.enable()

        // 只展示最后一个节点
        _markerList[_markerList.length - 1]._icon.children[0].children[2].style.display = '';

        map.off("click", throClickHandler);
        map.off("mousemove", mousemoveHandler);
        map.off("dblclick", dblclickHandler);
      };

      map.on("click", throClickHandler);
      map.on("mousemove", mousemoveHandler);
      map.on("dblclick", dblclickHandler);

    },
    startDrawPolygon() {
      const map = this.toolMap;
      let _this: any = this;
      let _lastMarker: any; //多边形最后一个点的标注
      // interactive：false,这个参数让线或者图标不可点击
      let _polygon: any = L.polygon([], {
        interactive: false,
        color: '#0066FF'
      }).addTo(_this.measuregroup);
      const tempLayer = L.polygon([], {
        interactive: false,
        color: '#0066FF'
      }).addTo(_this.measuregroup);
      let tempPoints: any = [];
      // 结束绘制
      const removeMeasureLayer = () => {
        _polygon?.removeFrom(_this.measuregroup);
        _lastMarker?.removeFrom(_this.measuregroup);
        dblclickHandler(null);
      };
      const clickHandler = (e: any) => {
        _polygon.addLatLng(e.latlng);
        tempPoints[0] = e.latlng;
        map.doubleClickZoom.disable()
      };

      const mousemoveHandler = (e: any) => {
        if (tempPoints.length) {
          tempPoints[1] = e.latlng;
          tempLayer.setLatLngs(tempPoints);
        }
      };
      // 双击结束， 移除事件是良好的编程习惯
      const dblclickHandler = (e: any) => {
        tempPoints = null;
        tempLayer.removeFrom(_this.measuregroup);
        map.doubleClickZoom.enable()

        let latlng = _polygon.getLatLngs();
        const len = this.formatArea(latlng);

        if (e) {
          _lastMarker = L.marker(e.latlng, {
            icon: L.divIcon({ html: _this.setTipText(len, removeMeasureLayer, false) }),
            zIndexOffset: markerIndex,
          }).addTo(_this.measuregroup)
        }


        map.off("click", clickHandler);
        map.off("mousemove", mousemoveHandler);
        map.off("dblclick", dblclickHandler);
      };

      map.on("click", clickHandler);
      map.on("mousemove", mousemoveHandler);
      map.on("dblclick", dblclickHandler);
    },
    formatLength(line: Array<{ lat: number, lng: number }>) {
      let dis = 0;
      for (let i = 0; i < line.length - 1; i++) {
        let start = line[i];
        let end = line[i + 1];
        dis += L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng]);//计算两个点之间的距离，并累加
      }
      //结果得到的也是number类型，单位是 米
      return (dis / 10e2).toFixed(2) + "km";
    },
    formatArea(polygon: Array<string>) {
      //L.GeometryUtil.geodesicArea(),返回number类型的数据，单位是平方米，这里做了一下转化
      //@ts-ignore
      let seeArea = L.GeometryUtil.geodesicArea(polygon[0]);
      let area = (seeArea / 10e5).toFixed(2) + "km²";
      return area;
    },
    initDrawCtrl() {
      _map = toRaw(this.toolMap)
      _map.on(L.Draw.Event.CREATED, this.drawCreateBack);
    },
    startDraw() {
      if (drawObj) {
        drawObj.disable();
        drawObj = null;
      }
      if (graphLayer) {
        graphLayer.removeFrom(_map)
        graphLayer = null;
      }
      this.showQueryTime = false;
      switch (editType) {
        case 'circle': {
          drawObj = new L.Draw.Circle(_map);
          break;
        }
        case 'polygon': {
          drawObj = new L.Draw.Polygon(_map);
          break;
        }
        case 'line': {
          drawObj = new L.Draw.Polyline(_map);
          break;
        }
        case 'rectangle': {
          drawObj = new L.Draw.Rectangle(_map);
          break;
        }
        case 'point': {// 点
          drawObj = new L.Draw.Marker(_map);
          break;
        }
      }
      // 启动
      drawObj?.enable();
    },
    drawCreateBack(e) {
      drawObj.disable();
      drawObj = null;
      let _borderColor = '#0066FF';
      let points = [], radius = 0, circlePoint = {}, type = 0;
      if (editType == 'circle') {
        circlePoint = e.layer.getLatLng();
        radius = e.layer.getRadius();
        type = 0;
        graphLayer = L.circle(circlePoint, {
          radius: radius, // 圆半径
          fillColor: _borderColor,  // 圆形填充颜色
          strokeColor: '#fff', // 描边颜色
          strokeWeight: 2, // 描边宽度
        }).addTo(_map);
      } else if (editType == 'rectangle') {
        points = e.layer.getLatLngs()[0];
        type = 1;
        graphLayer = L.polygon(points, {
          fillColor: _borderColor,// 多边形填充颜色
          weight: 2, // 线条宽度，默认为 1
          color: _borderColor, // 线条颜色
        }).addTo(_map);
      } else if (editType == 'polygon') {
        points = e.layer.getLatLngs()[0];
        type = 2;
        graphLayer = L.polygon(points, {
          fillColor: _borderColor,// 多边形填充颜色
          weight: 2, // 线条宽度，默认为 1
          color: _borderColor, // 线条颜色
        }).addTo(_map);
      }
      this.query.circlePoint = JSON.parse(JSON.stringify(circlePoint));
      this.query.points = JSON.parse(JSON.stringify(points));
      this.query.radius = radius;
      this.query.type = type;
      this.showQueryTime = true;
      // 只生效一次
      _map.off(L.Draw.Event.CREATED, this.drawCreateBack);
    },
  },
  watch: {
    map() {
      this.toolMap = toRaw(this.map)
      this.measuregroup = L.featureGroup([]).addTo(this.toolMap)
    }
  }
}
</script>
<style lang='scss' scoped>
.my-tool {
  height: 32px;
  background: #fff;
  border-radius: 5px;
  color: #000;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 0 10px;

  :deep(.el-dropdown) {
    margin-right: 10px;

    &:last-of-type {
      margin-right: 0;
    }
  }

  :deep(.el-dropdown-link) {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}

.rp-img {
  margin-right: 4px;
  font-size: 18px;
}

ul {
  list-style: none;
  margin: 0 !important;
}

.area-query-dom {
  background-color: #fff;
  position: absolute;
  top: 40px;
  left: 0;
  border-radius: 5px;
  padding: 8px;

  .area-query-title {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 0 6px;
  }

  :deep(.el-form-item__label) {
    font-weight: normal;
  }

  .dialog-footer {
    text-align: right;
  }
}

.search {
  display: flex;
  margin-bottom: 15px;

  .search-title {
    display: flex;
    align-items: center;

    .search-text {
      margin-right: 5px;
    }
  }
}
</style>